<script setup lang='ts'>
import { ref, reactive } from 'vue'

import { ElMessage, ElMessageBox } from 'element-plus'

import { 
  addPanel, 
  editPanel, 
  deletePanel 
} from '@/api/user'

// 定义变量
const detailVisible = ref(false)
const innerVisible = ref(false)
const buttonVisible = ref(false)

// 表单对象
let addForm = reactive({
  menuId: '', 
  id: '',
  panelName: '', 
  panelCode: '' ,
  itemList: [ '' ]
})

// 展示的target
let showItem:any = reactive({})

// 点击的面板
let butList:any = reactive({})

// 展示弹框
const showDialog = (row:any) => {
  showItem = {}
  showItem = { ...row }
  detailVisible.value = true
}

// 添加面板
const addPanelItem = () => {
  addForm.menuId = showItem.id.toString()
  innerVisible.value = true
}

// 修改面板
const updatePanel = (row:any) => {
  addForm = { ...row }
  innerVisible.value = true
}
// 删除面板
const deletePanelItem = (row: any) => {
  ElMessageBox.confirm(
    `是否删除' + ${row.name} + '?按下按钮同时删除`,
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
      deletePanel({ id: row.id.toString() }).then(() => {
        innerVisible.value = false
        detailVisible.value = false
        ElMessage({
          type: 'success',
          message: '删除成功！'
        })
      })
      
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled'
      })
    })
}
// 编辑按钮
const buttonChange = (row: any) => {
  butList = [ ...row.itemList ]
  addForm = { ...row }
  buttonVisible.value = true
}
// 确定提交面板
const submit = () => {
  if (addForm.id) {
    editPanel({ ...addForm }).then(() => {
      ElMessage({
        type: 'success',
        message: '修改成功！'
      })
      innerVisible.value = false
      detailVisible.value = false
    })
  } else {
    addPanel({ ...addForm }).then(res => {
      if(res.success) {
        ElMessage({
          type: 'success',
          message: '添加成功！'
        })
      } else {
        ElMessage({
          type: 'error',
          message: '添加失败！'
        })
      }
      innerVisible.value = false
      detailVisible.value = false
    }).catch(error => {
      ElMessage({
        type: 'error',
        message: '添加失败！'
      })
    })
  }
}

// 删除按钮
const deleteBut = (index,row:any) => {
  butList.splice(index, 1)
}
// 添加按钮
const addButObj = () => {
  butList.push({ itemName: '', itemCode: '', panelId: addForm.id })
}
// 确认
const submitBut = () => {
  let arr:any = []
  butList.forEach(el => {
    if (el.itemName && el.itemCode) {
      arr.push(el)
    }
  })
  addForm.itemList = [ ...arr ]
  submit()
  buttonVisible.value = false
}

// 定义函数
const closeDialog = () => {
  
}

// 向外暴露的函数
defineExpose({
  showDialog
})
</script>

<template>
  <el-dialog
    v-model="detailVisible"
    v-el-drag
    width="80%"
    :close-on-click-modal="false"
    @close="closeDialog"
  >
    <template #title>
      <div>
        权限配置<el-button
          class="m-l-ten"
          type="primary"
          size="small"
          @click="addPanelItem"
        >
          添加面板
        </el-button>
      </div>
    </template>
    
    <el-table
      :data="showItem.panelList"
    >
      <el-table-column type="expand">
        <template #default="scope">
          <div style="padding: 0 50px;">
            <el-tag
              v-for="(el, ind) in scope.row.itemList"
              :key="ind"
              style="margin-right: 5px;"
              type="success"
            >
              {{ el.itemName }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        property="panelName"
        label="面板名称"
      />
      <el-table-column
        property="panelCode"
        label="面板编号"
      />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="updatePanel(scope.row)"
          >
            修改
          </el-button>
          <el-button
            size="small"
            type="primary"
            @click="deletePanelItem(scope.row)"
          >
            删除
          </el-button>
          <el-button
            size="small"
            type="primary"
            @click="buttonChange(scope.row)"
          >
            编辑按钮
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="innerVisible"
      v-el-drag
      :close-on-click-modal="false"
      title="添加"
      append-to-body
    >
      <el-form
        class="inner-el-form"
        label-position="left"
        label-width="100px"
        :model="addForm"
      >
        <el-form-item label="面板名称">
          <el-input v-model="addForm.panelName" />
        </el-form-item>
        <el-form-item label="面板编号">
          <el-input v-model="addForm.panelCode" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submit"
          >
            确定
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      v-model:visible="buttonVisible"
      v-el-drag
      :close-on-click-modal="false"
      title="编辑按钮"
      append-to-body
    >
      <el-table
        :data="butList"
      >
        <el-table-column label="按钮名称">
          <template #default="scope">
            <el-input
              v-model="scope.row.itemName"
              size="small"
            />
          </template>
        </el-table-column>
        <el-table-column label="按钮编号">
          <template #default="scope">
            <el-input
              v-model="scope.row.itemCode"
              size="small"
            />
          </template>
        </el-table-column>
        <el-table-column
          width="80"
          label="删除"
          align="center"
        >
          <template #default="scope">
            <i
              style="cursor: pointer;"
              class="el-icon-minus"
              @click="deleteBut(scope.$index,scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: space-around;margin-top: 10px;">
        <i
          style="cursor: pointer;"
          class="el-icon-plus"
          @click="addButObj"
        />
        <el-button @click="submitBut">
          确定
        </el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<style lang="scss" scoped>
.m-l-ten {
  margin-left: 10px;
}
</style>